<template>
  <div class="playlist-container">
    <div class="top-wrap">
      <div class="img-wrap">
        <img :src="playList.coverImgUrl" alt=""/>
      </div>
      <div class="info-wrap">
        <p class="title">{{playList.name}}</p>
        <div class="author-wrap">
          <img
          class="avatar"
          :src="playList.creator.avatarUrl" alt=""/>
          <span class="name">
            {{playList.creator.nickname}}
          </span>
          <span class="time">{{playList.createTime}}</span>
        </div>
        <div class="play-wrap">
          <span class="iconfont icon-circle-play"></span>
          <span class="text">播放全部</span>
        </div>
        <div class="tag-wrap">
          <span class="title">标签:</span>
          <ul>
            <li v-for="(tagObj, index) in playList.tags" :key="index">
              {{tagObj}}
            </li>
          </ul>
        </div>
        <div class="desc-wrap">
          <span class="title">
            简介:
          </span>
          <span class="desc">
            {{playList.description}}
          </span>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeIndex" @tab-click="handleClick">
        <el-tab-pane label="歌曲列表" name="1">
          <table class="el-table playlit-table">
            <thead>
              <th></th>
              <th></th>
              <th>音乐标题</th>
              <th>歌手</th>
              <th>专辑</th>
              <th>时长</th>
            </thead>
            <tbody>
              <tr class="el-table__row"
              v-for="(listObj,index) in playLists"
              :key="listObj.id">
                <td>{{index+1}}</td>
                <td>
                  <div class="img-wrap">
                    <img src="" alt=""/>
                    <span
                    @click="playMusic(id)"
                    class="iconfont icon-play"></span>
                  </div>
                </td>
                <td>
                  <div class="song-wrap">
                    <div class="name-wrap">
                      <span></span>
                      <span class="iconfont icon-mv"></span>
                    </div>
                    <span>{{}}</span>
                  </div>
                </td>
                <!-- 歌手 -->
                <td>{{}}</td>
                <td>{{}}</td>
                <td>{{}}</td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="评论" name="2">
          <div class="comment-wrap">
            <p class="title">
              精彩评论
              <span class="number">
                {{total}}
              </span>
            </p>
            <div class="comments-wrap">
              <div class="item"
              v-for="(commentObj, index) in hotList" :key="index">
                <div class="icon-wrap">
                  <img :src="commentObj.user.avatarUrl" alt=""/>
                </div>
                <div class="content-wrap">
                  <div class="content">
                    <span class="name">
                      {{commentObj.user.nickname}}</span>
                    <span class="comment">
                      {{commentObj.content}}
                    </span>
                  </div>
                  <!-- 回复 -->
                  <div class="re-content" v-if="commentObj.beReplied.length != 0">
                    <span class="name">
                      {{commentObj.beReplied[0].user.nickname}}
                    </span>
                    <span class="conent">
                      {{commentObj.beReplied[0].content}}
                    </span>
                  </div>
                  <div class="date">时间</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 最新评论 -->
          <div class="comment-wrap">
            <p class="title">最新评论
              <span class="number">
                {{total}}
              </span>
            </p>
            <div class="comments-wrap">
              <div class="item"
              v-for="(newObj, index) in newList" :key="index">
                <div class="icon-wrap">
                  <img :src="newObj.user.avatarUrl" alt=""/>
                </div>
                <div class="content-wrap">
                  <div class="content">
                    <span class="name">
                      {{newObj.user.nickname}}</span>
                    <span class="comment">
                      {{newObj.content}}
                    </span>
                  </div>
                  <!-- 回复 -->
                  <div class="re-content" v-if="newObj.beReplied.length != 0">
                    <span class="name">
                      {{newObj.beReplied[0].user.nickname}}
                    </span>
                    <span class="conent">
                      {{newObj.beReplied[0].content}}
                    </span>
                  </div>
                  <div class="date">时间</div>
                </div>
              </div>
            </div>
          </div>
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="page"
            :page-size="5"
            @current-change="handleCurrentChange"
            :total="total">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'detail',
  data () {
    return {
      activeIndex: '1',
      playList: {},
      playLists: [],
      total: 1,
      limit: 20,
      type: '2',
      /*
      *0: 歌曲
      *1: mv
      *2: 歌单
      *3: 专辑
      *4: 电台
      *5: 视频
      */
      page: 1,
      hotList: [],
      newList: []
    }
  },
  created () {
    this.loadDetal()
    this.loadComments()
    this.loadNewComments()
  },
  methods: {
    handleClick () {},
    loadDetal () {
      axios({
        url: 'https://autumnfish.cn/playlist/detail',
        method: 'get',
        params: {
          id: this.$route.query.q
        }
      }).then(res => {
        const { playlist, privileges } = res.data
        this.playList = playlist
        this.playLists = privileges
        // console.log(res)
      })
    },
    loadComments () {
      axios({
        url: 'https://autumnfish.cn/comment/hot',
        method: 'get',
        params: {
          id: this.$route.query.q,
          type: this.type,
          limie: this.limit,
          offset: (this.page - 1) * this.limit
        }
      }).then(res => {
        const { total, hotComments } = res.data
        this.total = total
        this.hotList = hotComments
        // console.log(res.data)
      })
    },
    loadNewComments () {
      // 最新评论
      axios({
        url: 'https://autumnfish.cn/comment/playlist',
        method: 'get',
        params: {
          id: this.$route.query.q,
          limie: this.limit,
          offset: (this.page - 1) * this.limit
        }
      }).then(res => {
        const { comments, total } = res.data
        this.newList = comments
        this.total = total
        console.log(res)
      })
    },
    handleCurrentChange (page) {
      this.page = page
      this.loadNewComments()
    }
  }
}
</script>
